<template>
	<statusBarVue title="记录" :isShowBar="true" :isShowLeft="true" />
	<view class="editing-topic-page" :style="pageHaveBarStyle">
		<view class="record-content-group" v-if="recordContent">
			<rich-text :nodes="recordContent"></rich-text>
		</view>
		<view class="editing-topic-group" v-else>
			<view class="editing-content">
				<editor id="editor" :style="{ height: 'calc(' + pageHeighthaveBar + 'px - 120px )' }"
					class="ql-container" placeholder="添加记录内容" show-img-size show-img-toolbar show-img-resize
					@statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady">
				</editor>
			</view>

			<view class="editing-footer add-btns">
				<button style="color:#ffffff;backgroundColor:#22A366;" @click="handlePushTopic">提交</button>
			</view>

			<view class="editing-topic-btns" @tap="format">
				<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view>
				<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic">
				</view>
				<view class="iconfont icon-charutupian" @tap="insertImage"></view>
				<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
					data-name="list" data-value="ordered"></view>
				<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
					data-name="list" data-value="bullet"></view>
				<view class="iconfont icon-undo" @tap="undo"></view>
				<view class="iconfont icon-redo" @tap="redo"></view>
				<view class="iconfont icon-shanchu" @tap="clear"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue';

	import {
		publics
	} from '@/mixins/publics.js';

	import {
		postInspection
	} from '@/utils/api.js';

	import {
		postAddForum
	} from "@/utils/api"

	import tool_oss from '@/utils/oss';

	export default {
		mixins: [publics],
		components: {
			statusBarVue
		},
		data() {
			return {
				recordContent: '', // 接收前页面富文本内容
				content: '',
				editingTitle: '',
				readOnly: false, // 是否可以编辑
				formats: {},
				showToolbar: false,
				beforePageData: {} // 接收之前页面所传参数
			};
		},
		created() {},
		onLoad(options) {
			console.log("options - jl----->>>", options);
			if(!options.id){
				const recordContent = uni.getStorageSync('recordContent');
				this.recordContent = recordContent;
			}else{
				this.beforePageData = options;
			}
		},
		onUnload(){
			console.log("xiao hui");
			uni.removeStorageSync('recordContent');
		},
		methods: {
			// 提取图片
			extractImageSrc(htmlContent) {
				const regex = /<img\s+[^>]*src=["']([^"']+)["']/g;
				let matches = [];
				let match;

				while ((match = regex.exec(htmlContent)) !== null) {
					matches.push(match[1]);
				}

				return matches;
			},
			// 提交
			handlePushTopic() {
				const {
					id,
					gis
				} = this.beforePageData;
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec();

				this.editorCtx.getContents({
					success: (res) => {
						if ((res.text).length < 2) {
							uni.showToast({
								icon: 'error',
								title: '内容不可为空！'
							})
							return;
						}
						let postData = {
							id,
							content: res.html,
							gis,
							imgs: this.extractImageSrc(res.html)
						};
						postInspection(postData).then(res => {
							if (res.code === 200) {
								uni.showModal({
									title: '提示',
									content: '提交成功！',
									success: function(res) {
										if (res.confirm) {
											uni.navigateBack()
										}
									}
								});
							}
						})
					}
				})
			},

			readOnlyChange() {
				this.readOnly = !this.readOnly
			},
			onEditorReady() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
				// #endif

				// #ifdef APP-PLUS || MP-WEIXIN || H5
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
				// #endif
			},
			undo() {
				this.editorCtx.undo()
			},
			redo() {
				this.editorCtx.redo()
			},
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				// console.log('format', name, value)
				this.editorCtx.format(name, value)
			},
			onStatusChange(e) {
				const formats = e.detail
				this.formats = formats
			},
			insertDivider() {
				this.editorCtx.insertDivider({
					success: function() {
						console.log('insert divider success')
					}
				})
			},
			clear() {
				uni.showModal({
					title: '清空编辑器',
					content: '确定清空编辑器全部内容？',
					success: res => {
						if (res.confirm) {
							this.editorCtx.clear({
								success: function(res) {
									console.log("clear success")
								}
							})
						}
					}
				})
			},

			insertImage() {
				uni.chooseImage({
					count: 1,
					success: (img) => {
						tool_oss.oss.upload(img.tempFiles).then(res => {
							if (res.statusCode === 200) {
								this.editorCtx.insertImage({
									src: res.fileUploadSuccessObj.url,
									extClass: 'rext-img',
									alt: '图像',
								})
							}
						});

					}
				})
			}
		}
	};
</script>

<style lang="scss">
	@import "@/static/css/editor-icon.css";

	.iconfont {
		display: inline-block;
		padding: 8px 8px;
		width: 24px;
		height: 24px;
		cursor: pointer;
		font-size: 20px;
	}

	.toolbar {
		box-sizing: border-box;
		border-bottom: 0;
		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	}

	.ql-active {
		color: #22a366;
	}

	.ql-container {
		box-sizing: border-box;
		padding: 12px 8px;
		width: 100%;
		min-height: 30vh;
		height: 100%;
		font-size: 16px;
		line-height: 1.5;
		overflow: auto;
	}


	.editing-topic-page {
		position: fixed;
		left: 0;
		right: 0;
		box-sizing: border-box;
		padding: 24px 12px;
		background: linear-gradient(to bottom, transparent 0%, white 20%, white 100%);
		
		.record-content-group{
			width: 94.67vw;
			height: 100%;
			margin: auto;
			overflow: auto;
			
			.rext-img{
				max-width: 100%;
				
			}
		}
	
		.editing-topic-group {
			width: 94.67vw;
			margin: auto;

			.editing-footer {
				width: 94.67vw;
				height: auto;
				position: fixed;
				left: 0;
				right: 0;
				margin: auto;
				bottom: 20px;
				padding-bottom: calc(env(safe-area-inset-bottom) + 20px);

			}
		}

		.editing-title {
			font-size: 20px;
			font-weight: bold;
			color: #9296A1;
			border-bottom: 1px solid #E1E1E1;
			padding-bottom: 14px;
			padding: 0 8px;
			height: 30px;
			line-height: 30px;
		}

		.editing-topic-btns {
			height: 44px;
			border-radius: 4px;
			border: 1px solid #eee;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 14px;
			position: fixed;
			left: 0;
			right: 0;
			margin: auto;
			bottom: calc(env(safe-area-inset-bottom) + 86px);
		}

		.editing-content {
			// padding-top: 12px;
		}
	}
</style>